$(function() {
	//鼠标悬浮到商品上的样式
	$('.wrapper').on('mouseenter','.product-wrapper',function() {
		$(this).css('border-bottom', '1px solid #000');
	})
	$('.wrapper').on('mouseleave','.product-wrapper',function() {
		$(this).css('border-bottom', 'none');
	})

	//手动切换焦点图
	$('.indicator-dots li').click(function() {
		//获取点击的li标签在ul中的索引，+1的目的是第三行代码中的nth-child的索引从1开始
		var index = $('.indicator-dots li').index($(this)) + 1;
		$('.focus-image li').hide();
		$('.focus-image li:nth-child(' + index + ')').show();
		/*设置用户点击的li标签的激活状态
		首先设置所有li标签为无选中状态，再设置当前点击的标签为选中状态
		*/
		$('.indicator-dots li').removeClass('selected');
		$(this).addClass('selected');
	})
	//焦点图自动轮播
	setInterval(focus, 2000);

	$(window).scroll(function() {
		//下拉加载
		if ($(this).scrollTop() + $(this).height() >= $(document).height()) // 接近底部100px
		{
			$('#tips').show();
			setTimeout(loadData, 2000);
		}
	});
	//加载数据
	function loadData() {
		for (var i = 0; i < 4; i++) {
			var html = "";
			if (i == 1) {
				html += '<div class="product-wrapper" style="margin-right: 26px;margin-left: 26px;">';
			} else if (i == 2) {
				html += '<div class="product-wrapper" style="margin-right: 26px;">';
			} else {
				html += '<div class="product-wrapper">';
			}

			html += '<div class="product-image">';
			html += '<a href="">';
			html += '<img src="image/no_image.png" alt="" title="" class="img-responsive">';
			html += '</a>';
			html += '</div>';
			html += '<div class="product-info">';
			html += '<div class="product-name">';
			html += '<a href="">动态加载的商品</a>';
			html += '</div>';

			html += '<div class="product-rating">';
			html += '<span class="fa fa-stack">';
			html += '<i class="fa fa-star fa-stack-2x"></i>';
			html += '</span>';
			html += '<span class="fa fa-stack">';
			html += '<i class="fa fa-star fa-stack-2x"></i>';
			html += '</span>';
			html += '<span class="fa fa-stack">';
			html += '<i class="fa fa-star fa-stack-2x"></i>';
			html += '</span>';
			html += '<span class="fa fa-stack">';
			html += '<i class="fa fa-star fa-stack-2x"></i>';
			html += '</span>';
			html += '<span class="fa fa-stack">';
			html += '<i class="fa fa-star fa-stack-2x"></i>';
			html += '</span>';
			html += '</div>';
			html += '<div class="product-price">';
			html += '<span class="price-new">￥2,999.00</span>';
			html += '<span class="price-old">￥3,799.00</span>';
			html += '</div>';
			html += '<div class="product-action">';
			html += '<button type="button" class="add-to-cart" onclick="cart.add(80);">';
			html += '<i class="fa fa-shopping-cart"></i>';
			html += '<span>加入购物车</span>';
			html += '</button>';
			html += '<div class="ps-add-buyincang" id="btn-visible">';
			html += '<button type="button" class="wishlist" onclick="wishlist.add(80);">';
			html += '<i class="fa fa-heart-o"></i>';
			html += '<span>收藏</span>';
			html += '</button>';
			html += '<button type="button" class="compare" onclick="compare.add(80);">';
			html += '<i class="fa fa-bars"></i>';
			html += '<span>对比</span>';
			html += '</button>';
			html += '</div>';
			html += '</div>';
			html += '</div>';
			html += '</div>';			
			$('#other').append(html);
			$('#tips').hide();
			/*
			$(html).on('mouseenter',function() {				
				$(this).css('border-bottom', '1px solid #000');
			})
			$(html).on('mouseleave',function() {
				$(this).css('border-bottom', 'none');
			})*/

		}
	}
})
//焦点图函数
var img_index = 2;

function focus() {
	if (img_index > 3) {
		img_index = 1;
	}
	$('.focus-image li').hide();
	$('.indicator-dots li').removeClass('selected');
	$('.focus-image li:nth-child(' + img_index + ')').show();
	$('.indicator-dots li:nth-child(' + img_index + ')').addClass('selected');
	img_index++;
}